<template>
  <el-container class="homeContainer">
    <!-- 头部信息 -->
    <el-header>
      <div class="title">
        <img
          src="../assets/image/logo.png"
          @click="close"
          title="点击可折叠或展开"
          style="cursor:pointer"
        />
        论坛后台管理系统
      </div>
      <!-- 右边下拉菜单 -->
      <div>
        <el-badge :value="value" class="item" :hidden="hidden" type="primary">
          <span
            class="iconfont icon-xinxifankui"
            @click="seefeedback"
            style="cursor:pointer;color:white;font-size:18px"
          ></span>
        </el-badge>

        <!-- 查看反馈内容 -->
        <el-drawer
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
          :show-close="false"
        >
          <div class="feedbox">
            <div class="feedtitle">
              <div class="text">
                用户反馈
              </div>
              <div class="deleteall" @click="deleteall">
                清空所有消息
              </div>
            </div>
            <el-empty description="目前没有反馈哦~" v-if="showempty"></el-empty>
            <div
              class="feeditem"
              v-for="(item, index) in feedcontent"
              :key="index"
            >
              <div class="itemtop">
                <div class="userinfo">
                  <el-avatar
                    shape="circle"
                    :size="40"
                    fit="fill"
                    :src="item.userimg"
                  ></el-avatar>
                  <div>
                    <div class="username">
                      {{ item.username }}
                    </div>
                    <div class="userid">
                      {{ item.userid }}
                    </div>
                  </div>
                </div>
                <div class="itemextra">
                  <span class="time">
                    {{ item.time }}
                  </span>
                  <span style="cursor:pointer" @click="deleteitem(item.id)" class="iconfont icon-shanchu">
                    
                  </span>
                </div>
              </div>
              <div class="itemcontent">
                {{ item.content }}
              </div>
            </div>
          </div>
        </el-drawer>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-avatar
              shape="square"
              :size="40"
              fit="fill"
              :src="userimg"
              style="vertical-align:middle;margin-right:10px"
            ></el-avatar
            ><span style="color:white;cursor:pointer">{{ username }}</span
            ><i
              class="el-icon-arrow-down el-icon--right"
              style="color:white"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              ><span @click="changeVisible = true" style="margin-right:7px"
                >修改密码</span
              ><i class="iconfont icon-xiugaimima4"></i>
            </el-dropdown-item>
            <el-dropdown-item
              ><span @click="logout" style="margin-right:7px">退出登录</span>
              <i class="iconfont icon-tuichudenglu4"></i
            ></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="changeVisible" width="500px">
      <el-form :model="passwordform" label-width="120px">
        <el-form-item label="原密码">
          <el-input
            v-model="passwordform.oldpassword"
            @blur="validate"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordform.newpassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="passwordform.newpassword2"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatepass">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改密码对话框结束 -->
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside :width="iscollapse ? '50px' : '250px'">
        <!-- <button @click="close" class="btn">
          {{ iscollapse ? "open" : "close" }}
        </button> -->
        <transition name="el-fade-in">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#0e0f28"
            text-color="#aaa"
            active-text-color="#fff"
            :collapse="iscollapse"
            :collapse-transition="false"
            unique-opened
            router
          >
            <el-submenu index="9">
              <template slot="title">
                <i class="iconfont icon-yonghuguanli1"></i>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item index="/students">
                <i class="iconfont icon-yonghuliebiao2"></i>
                <span slot="title">用户列表</span>
              </el-menu-item>
              <el-menu-item index="/user">
                <i class="iconfont icon-guanliyuanliebiao"></i>
                <span slot="title">管理员列表</span>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="111">
              <template slot="title">
                <i class="iconfont icon-tiaozaoshichang"></i>
                <span>跳蚤市场</span>
              </template>
              <el-menu-item index="tiaozao">
                <i class="iconfont icon-tiaozaoshichang"></i>
                <span>跳蚤市场</span></el-menu-item
              >
            </el-submenu>
            <el-submenu index="222">
              <template slot="title">
                <i class="iconfont icon-shiwuzhaoling1"></i>
                <span>物归原主</span>
              </template>
              <el-menu-item index="find">
                <i
                  class="iconfont icon-dibudaohanglan-
"
                ></i>
                <span>失物招领</span></el-menu-item
              >
              <el-menu-item index="lost">
                <i class="iconfont icon-xunwuqishiweixuanzhong"></i>
                <span>寻物启事</span></el-menu-item
              >
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="iconfont icon-xiaoyuanguanli"></i>
                <span>校园墙管理</span>
              </template>
              <el-menu-item index="biaobai">
                <i class="iconfont icon-24gl-playlistHeart2"></i>
                <span>表白墙管理</span></el-menu-item
              >
              <el-menu-item index="tucao">
                <i class="iconfont icon-tucaofankui"></i>
                <span>吐槽墙管理</span></el-menu-item
              >
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="iconfont icon-rementiewen"></i>
                <span>贴文管理</span>
              </template>
              <el-menu-item index="tiewen">
                <i class="iconfont icon-rementiewen"></i>
                <span>贴文管理</span></el-menu-item
              >
            </el-submenu>
            <el-submenu>
              <template slot="title">
                <i class="iconfont icon-EDI-00-06-gonggaolanguanli"></i>
                <span>公告栏管理</span>
              </template>
              <el-menu-item index="AddBoard">
                <i
                  class="iconfont icon-wulianguoji-tubiao_fabugonggao
"
                ></i>
                <span slot="title">发布公告</span>
              </el-menu-item>
              <el-menu-item index="Board">
                <i class="iconfont icon-gonggaolanguanli"></i>
                <span slot="title">管理公告</span>
              </el-menu-item>
          
              <el-menu-item index="depart">
                <i class="iconfont icon-gonggaolanguanli"></i>
                <span slot="title">轮播图管理</span>
              </el-menu-item>
            </el-submenu>

            <el-menu-item index="statistic">
              <i class="iconfont icon-fangwentongji"></i>
              <span slot="title">访问统计</span>
            </el-menu-item>
          </el-menu>
        </transition>
      </el-aside>
      <!-- 主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    //   退出登录
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
      this.$message.warning("退出登录");
    },
    // 折叠导航栏
    close() {
      this.iscollapse = !this.iscollapse;
    },
    validate() {
      let name = window.sessionStorage.getItem("tokenid");
      const md5 = this.$crypto.createHash("md5");
      md5.update(this.passwordform.oldpassword);
      let md5pass = md5.digest("hex");
      console.log(md5pass);
      this.$http
        .post("psvalidate", {
          name: name,
          password: md5pass,
        })
        .then((res) => {
          console.log(res);
          if (res.data == 200) {
            this.$message.error("原密码输入有误");
          }
        });
    },
    // 修改密码
    updatepass() {
      if (this.passwordform.newpassword != this.passwordform.newpassword2) {
        this.$message.warning("两次密码输入不符");
      } else {
        const md5 = this.$crypto.createHash("md5");
        md5.update(this.passwordform.newpassword);
        let md5pass = md5.digest("hex");
        this.$http
          .post("updatepassword", {
            name: window.sessionStorage.getItem("tokenid"),
            password: md5pass,
          })
          .then((res) => {
            if (res.data == 200) {
              this.$message.success("密码修改成功！");
              // this.logout();
              this.changeVisible = false;
            }
          });
      }
    },
    // 查找是否有新的反馈
    checkfeed() {
      this.$http.get("http://localhost:8090/check").then((res) => {
        console.log(res);

        if (res.data >= 1) {
          this.hidden = false;
          this.value = res.data;
        } else {
          this.hidden = true;
        }
      });
    },
    seefeedback() {
      this.drawer = true;
      this.value = 0;
      this.hidden = true;
      this.$http.get("http://localhost:8090/findback").then((res) => {
        console.log(res);
        this.feedcontent = res.data;
        if (res.data.length == 0) {
          this.showempty = true;
        }
      });
      this.$http.get("http://localhost:8090/updatefeed").then((res) => {
        console.log(res);
      });
    },
    // 删除一个反馈
    deleteitem(id) {
      this.$http
        .post("http://localhost:8090/deleteback", {
          id: id,
        })
        .then((res) => {
          this.$message.success("已删除该反馈");
          this.seefeedback();
          console.log(res);
          // this.feedcontent = res.data;
        });
    },
    // 删除所有反馈
    deleteall() {
      this.$confirm("是否删除所有反馈?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http
          .get("http://localhost:8090/deleteall")
          .then((res) => {
            if (res.data >= 1) {
              this.$message.success("删除成功");
              this.seefeedback();
            }
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "已取消删除",
            });
          });
      });
    },
  },
  data() {
    return {
      username: "",
      userimg: "",
      iscollapse: false,
      changeVisible: false,
      passwordform: {
        oldpassword: "",
        newpassword: "",
        newpassword2: "",
      },
      hidden: true,
      value: 0,
      drawer: false,
      // 反馈内容
      feedcontent: [],
      showempty: false,
    };
  },
  created() {
    this.checkfeed();
    this.username = window.sessionStorage.getItem("tokenid");
    this.userimg = window.sessionStorage.getItem("tokenimg");
  },
};
</script>
<style scoped>
.homeContainer {
  height: 100%;
}
.el-header {
  /* background-color: #3e3e3e; */
  /* background-color: #0e0f28; */
  background-color: #0e0f28;

  /* background:linear-gradient(to right,#0e0f28,#666565) ; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: fixed;
    width: 100%;
   top: 1px; */
}
.drop {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}
.title {
  display: flex;
  align-items: center;
  color: #fff;
}
.title img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.el-aside {
  /* background-color: #3e3e3e; */
  background-color: #0e0f28;

  cursor: none;
  /* position: fixed;
  top: 60px; */
}
/* 反馈组件 */
.item {
  margin-right: 25px;
}
.el-aside .btn {
  width: 100%;
  background-color: #6a6a6a;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: none;
  cursor: pointer;
}
.el-main {
  background-color: #eee;
}
.iconfont {
  /* color: #6a6a6a; */
  font-size: 16px;
  margin-right: 10px;
}
.el-menu-item.is-active {
  width: 95%;
  margin: 5px auto;
  border-radius: 5px;
  background-color: #414141 !important;
}
.el-drawer {
  padding-top: 0px;
}
/* 反馈内容布局 */
.feedbox {
  padding: 10px;
}
.feeditem {
  margin-bottom: 10px;
}
.feedtitle {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #c0c4cc;
}
.text {
  font-weight: 700;
}
.deleteall {
  color: blue;
  font-size: 14px;
  cursor: pointer;
}
.userinfo {
  display: flex;
  align-items: center;
}
.userinfo div {
  margin-left: 5px;
}
.username,
.userid,
.time {
  font-size: 14px;
}
.itemtop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time {
  margin-right: 20px;
}
.itemcontent {
  font-size: 14px;
  margin-top: 10px;
  border-radius: 5px;
  background-color: #ecebeb;
  padding: 8px;
  letter-spacing: 0.5px;
}
.el-menu {
  background-color: #2353c2;
}
</style>
